<template>
	<view class="account">
		<view class="account-content">
			<view class="uni-flex uni-align-center uni-justify-between titlebalanceBox">
				<view class="title">可提现余额 (元)</view>
				<!-- 添加点击事件fillAllAmount -->
				<view class="balance-title uni-flex uni-align-center" @click="fillAllAmount">全部提现</view>
			</view>
			<view>
				<view class="uni-flex uni-align-center priceBox">
					<text class="balance-money">{{ form.incomeAmount }}</text>
				</view>
			</view>
			<view class="uni-flex uni-justify-between balance-detail">
				<text class="balance-detail-label">收益余额（元）</text>
				<text class="balance-detail-val">{{ form.incomeAmount }}</text>
			</view>
			<view class="uni-flex uni-justify-between balance-detail">
				<text class="balance-detail-label">冻结余额（元）</text>
				<text class="balance-detail-val">{{ form.lockAmount }}</text>
			</view>
		</view>

		<view class="account-content" style="padding-bottom: 124rpx">
			<view class="uni-flex uni-align-center uni-justify-between titleBox">
				<view class="title">提现至</view>
				<view class="bankcard uni-flex uni-align-center" @click="showBankcard">微信<uni-icons type="right"
						size="15" color="#666666"></uni-icons></view>
			</view>
			<view>
				<view class="price_title">提现金额</view>
				<view class="uni-flex uni-align-center priceBox"><text class="priceunit">¥</text><uni-easyinput
						type="digit" v-model="form.amount" focus trim :inputBorder="false" :clearable='false'
						placeholder="请输入提现金额"></uni-easyinput></view>
			</view>
		</view>

		<view :class="form.amount ? 'button button_active' : 'button'" @click="submit">确认提现</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		reactive
	} from "vue";
	import {
		accountAmount,
		withdrawal
	} from "@/api/extract.js";

	const showBankcard = () => {
		uni.navigateTo({
			url: "/pages/personalCenter/Universal/BankCard",
		});
	};

	const form = reactive({
		incomeAmount: 0, // 收入金额
		lockAmount: 0, // 冻结金额
		rechargeAmount: 0, // 充值金额
		amount: null
	})

	// 添加全部提现的事件处理函数
	const fillAllAmount = () => {
		// 将可提现余额赋值到提现金额输入框
		form.amount = form.incomeAmount.toString();
	}

	const accountAmountFn = () => {
		accountAmount().then((res) => {
			if (res.code == 200) {
				form.incomeAmount = res.data?.incomeAmount ?? 0
				form.lockAmount = res.data?.lockAmount ?? 0
			}
		})
	}

	const submit = () => {
		const params = {
			amount: form.amount
		}
		withdrawal(params).then((res) => {
			if (res.code == 200) {
				const data = res?.data
				if (wx.canIUse('requestMerchantTransfer')) {
					wx.requestMerchantTransfer({
						mchId: data?.mchId,
						appId: data?.appId,
						package: data?.result?.packageInfo,
						success: (res) => {
							console.log('success:', res);
							uni.showToast({
								title: "提现成功",
								icon: "success"
							});
						},
						fail: (res) => {
							console.log('fail:', res);
						},
					});
				} else {
					wx.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false,
					});
				}
			}
		})
	}

	onMounted(() => {
		accountAmountFn()
	});
</script>

<style lang="scss" scoped>
	.account {
		padding: 26rpx 24rpx;
		background: #f5f5f5;
		min-height: calc(100vh - 52rpx);

		.account-content {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 0 23rpx 34rpx;
			margin-bottom: 20rpx;

			.titleBox {
				padding: 40rpx 0;
			}

			.titlebalanceBox {
				padding: 40rpx 0;

				.balance-title {
					color: #ff6a47;
					font-size: 28rpx;
					cursor: pointer; // 增加鼠标指针样式，提示可点击
				}
			}

			.balance-detail {
				font-size: 30rpx;
				color: #999999;
				margin-top: 20rpx;

				.balance-detail-label {
					font-weight: 400;
					color: #999;
					font-size: 30rpx;
				}

				.balance-detail-val {
					color: #333333;
					font-size: 30rpx;
				}
			}

			.balance-money {
				font-size: 50rpx;
				color: #303133;
				padding-bottom: 20rpx;
			}

			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #303133;
			}

			.bankcard {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.price_title {
				font-weight: 500;
				font-size: 28rpx;
				color: #303133;
				margin: 34rpx 0;
			}

			.priceunit {
				font-size: 30rpx;
				color: #303133;
			}

			.priceBox {
				padding-bottom: 9rpx;
				border-bottom: 1px solid #e2e2e2;

				.price {
					margin-left: 12rpx;
					font-size: 50rpx;
					color: #303133;
				}
			}
		}
	}

	.button {
		width: 86%;
		height: 88rpx;
		background: #cae1ff;
		border-radius: 44rpx;
		text-align: center;
		font-weight: 600;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 88rpx;
		margin: 78rpx auto 54rpx;
	}

	.button_active {
		background: #2f80ed;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 50rpx;
		color: #303133;
	}
</style>